<template>
  <a-modal
    :title="formTile + '菜单'"
    :visible="true"
    width="60%"
    :footer="null"
    @cancel="reset"
  >
    <div class="main">
      <a-card>
        <a-row
          type="flex"
          justify="start"
          align="top"
        >
          <a-col :span="24">
            <a-form
              :form="form"
              @submit="handleSubmit"
              :labelCol="formItemLayout.labelCol"
              :wrapperCol="formItemLayout.wrapperCol"
            >
              <a-form-item
                label="菜单名称"
                :required="true"
              >
                <a-input
                  allow-clear
                  placeholder="请输入菜单名称"
                  :maxLength="40"
                  v-decorator="[
                  `menuName`,
                  {
                    validateTrigger: ['change', 'blur'],
                    rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入菜单名称'
                      }
                    ]
                  }
                ]"
                />
              </a-form-item>
              <a-form-item
                label="菜单排序"
                :required="true"
              >
                <a-input-number
                  allow-clear
                  placeholder="1/2/3"
                  :min="1"
                  :max="999"
                  style="width:200px"
                  v-decorator="[
                  `sorted`,
                  {
                    validateTrigger: ['change', 'blur'],
                    rules: [
                      {
                        required: true,
                        message: '请输入菜单排序'
                      }
                    ]
                  }
                ]"
                />
              </a-form-item>
              <a-form-item
                label="菜单级别"
                :required="true"
              >
                <a-select
                  allow-clear
                  show-search
                  placeholder="请选择菜单级别"
                  @change="menuChange"
                  optionFilterProp="children"
                  v-decorator="[
                  'levelIndex',
                  {
                    rules: [{ required: true, message: '请选择菜单级别!' }]
                  }
                ]"
                >
                  <a-select-option
                    :value="item.id"
                    v-for="(item,index)  in menuType"
                    :key="index"
                  >
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item
                label="父级菜单"
                :required="true"
                v-if="showMe == 2"
              >
                <a-select
                  allow-clear
                  show-search
                  placeholder="请选择父级菜单"
                  optionFilterProp="children"
                  v-decorator="[
                  'parentId',
                  {
                    rules: [{ required: true, message: '请选择父级菜单!' }]
                  }
                ]"
                >
                  <a-select-option
                    :value="item.id"
                    v-for="item in menuList"
                    :key="item.id"
                  >
                    {{ item.menuName }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item
                label="事件类型"
                :required="true"
                help="一级菜单下如有二级菜单则该选项不生效"
              >
                <a-select
                  allow-clear
                  show-search
                  placeholder="请选择事件类型"
                  @change="eventChange"
                  optionFilterProp="children"
                  v-decorator="[
                  'type',
                  {
                    rules: [{ required: true, message: '请选择事件类型!' }]
                  }
                ]"
                >
                  <a-select-option
                    :value="item.value"
                    v-for="(item,index) in eventType"
                    :key="index"
                  >
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item
                label="网页链接"
                :required="true"
                v-if="showEn == 'view'"
              >
                <a-input
                  allow-clear
                  placeholder="请输入链接http://或https://开头"
                  v-decorator="[
                  `businessInfo`,
                    { rules: [{ required: true, message: '请输入正确格式的网页链接！', whitespace: true, pattern: /http(s)?:\/\/[\w.]+[\w\/]*[\w.]*\??[\w=&\+\%]*/is }] }]"
                />
              </a-form-item>
              <a-form-item
                label="appid"
                :required="true"
                v-if="showEn == 'miniprogram'"
              >
                <a-input
                  allow-clear
                  placeholder="请输入appid"
                  :maxLength="40"
                  v-decorator="[
                  `appid`,
                  {
                    validateTrigger: ['change', 'blur'],
                    rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入appid'
                      }
                    ]
                  }
                ]"
                />
              </a-form-item>
              <a-form-item
                label="小程序链接"
                :required="true"
                v-if="showEn == 'miniprogram'"
              >
                <a-input
                  allow-clear
                  placeholder="请输入链接http://或https://开头"
                  v-decorator="[
                  `businessInfo`,
                    { rules: [{ required: true, message: '请输入正确格式的小程序链接！', whitespace: true, pattern: /http(s)?:\/\/[\w.]+[\w\/]*[\w.]*\??[\w=&\+\%]*/is }] }]"
                />
              </a-form-item>
              <a-form-item
                label="规则关键字"
                :required="true"
                v-if="showEn == 'click'"
              >
                <a-input
                  allow-clear
                  placeholder="请输入规则关键字"
                  v-decorator="[
                  `businessInfo`,
                  {
                    validateTrigger: ['change', 'blur'],
                    rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入规则关键字'
                      }
                    ]
                  }
                ]"
                />
              </a-form-item>
              <a-form-item label="菜单描述">
                <a-textarea
                  allow-clear
                  placeholder="请输入菜单描述"
                  v-decorator="['menuDesc', { rules: [{ required: true, message: '请输入菜单描述' }] }]"
                ></a-textarea>
              </a-form-item>
              <a-form-item label="是否开启">
                <a-switch v-decorator="['status', { initialValue: true, valuePropName: 'checked', rules: [{ required: true, message: '请选择是否开启' }] }]"></a-switch>
              </a-form-item>
              <a-row style="margin-top:10px">
                <a-col
                  :span="16"
                  :offset="18"
                  class="info-action"
                >
                  <a-button
                    @click="clear"
                    v-if="showTable"
                  >
                    重置
                  </a-button>
                  <a-button
                    :style="{ marginLeft: '8px' }"
                    type="primary"
                    html-type="submit"
                    :loading="loading"
                  >
                    保存
                  </a-button>
                </a-col>
              </a-row>
            </a-form>
          </a-col>
        </a-row>
      </a-card>
    </div>

  </a-modal>
</template>

<script>
import { postAction, getAction } from '@/api/manage'
const menuType = [
  {
    id: '1',
    name: '一级菜单'
  },
  {
    id: '2',
    name: '二级菜单'
  }
]
export default {
  props: {
    account: {
      type: Object,
      default: null
    },
    appid: {
      type: String,
      default: null
    }
  },

  data() {
    return {
      urlKey: 'basemgt-wx',
      menuType,
      eventType: [],
      menuList: [],
      showEn: false,
      showMe: false,
      typeName: '',
      id: '',
      fieldConfigList: [],
      ischoose: 1,
      roleName: '',
      id: '',
      formItemLayout: {
        labelCol: {
          xl: { span: 5 },
          xs: { span: 5 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xl: { span: 8 },
          xs: { span: 12 },
          sm: { span: 12 }
        }
      },
      loading: false,
      form: this.$form.createForm(this),
      showTable: false
    }
  },

  created() {
    const { account } = this.$props
    if (account) {
      this.formTile = '编辑'
      this.id = account.id
      this.showEn = account.type
      if (account.parentId) {
        this.showMe = 2
      }
      this.$nextTick(() => {
        this.form.setFieldsValue({
          menuName: account.menuName,
          sorted: account.sorted,
          levelIndex: account.levelIndex,
          parentId: account.parentId,
          type: account.type ? account.type : '1',
          businessInfo: account.businessInfo,
          pagePath: account.pagePath,
          menuDesc: account.menuDesc,
          status: account.status == 1 ? true : false
        })
      })
      this.roleName = account.roleName
    } else {
      this.formTile = '新增'
      this.showTable = true
    }
  },
  watch: {
    appid() {
      this.getMenuList()
      this.getTypeList()
    }
  },
  mounted() {
    this.getMenuList()
    this.getTypeList()
  },
  methods: {
    reset() {
      this.form.resetFields()
      this.$emit('close')
    },
    clear() {
      this.form.resetFields()
    },
    getMenuList() {
      const params = {
        appid: this.appid,
        levelIndex: 1
      }
      postAction(`${this.urlKey}/WxMenuInfo/findMenuData`, params).then(data => {
        if (data.code == 200) {
          this.menuList = data.data
        } else {
          this.$message.warning(data.msg || data.message)
        }
      })
    },
    getTypeList() {
      const params = {
        parentId: 1
      }
      postAction(`${this.urlKey}/WxDict/findWxDictList`, params).then(data => {
        if (data.code == 200) {
          this.eventType = data.data
        } else {
          this.$message.warning(data.msg || data.message)
        }
      })
    },
    eventChange(type) {
      this.showEn = type
    },
    menuChange(menu) {
      this.showMe = menu
    },
    choose(record, type, operation) {
      if (operation == 1) {
        this.fieldConfigList.map(item => {
          if (item.fieldId == record.fieldId) {
            item.mainPage = type
            return
          }
        })
      }
      if (operation == 2) {
        this.fieldConfigList.map(item => {
          if (item.fieldId == record.fieldId) {
            item.detailPage = type
            return
          }
        })
      }
      if (operation == 3) {
        this.fieldConfigList.map(item => {
          if (item.fieldId == record.fieldId) {
            item.printPage = type
            return
          }
        })
      }
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.submit(values)
        }
      })
    },
    submit(values) {
      this.loading = true
      this.eventType.map(item => {
        if (item.value == values.type) {
          this.typeName = item.name
        }
      })
      var params = {
        id: this.id,
        appid: this.appid,
        menuName: values.menuName,
        menuDesc: values.menuDesc,
        appid: values.appid,
        type: values.type == 1 ? '' : values.type,
        typeName: this.typeName,
        businessInfo: values.businessInfo,
        levelIndex: values.levelIndex,
        sorted: values.sorted,
        parentId: values.parentId ? values.parentId : 0,
        status: values.status ? 1 : 0
      }
      const api = this.showTable ? `${this.urlKey}/WxMenuInfo/insertMenu` : `${this.urlKey}/WxMenuInfo/modifyMenuById`
      postAction(api, params).then(data => {
        if (data.code == 200) {
          this.$message.success(this.showTable ? '新建帐号成功！' : '修改成功！')
          this.reset()
        } else {
          this.$message.warning(data.data)
        }
        this.loading = false
      })
    }
  }
}
</script>


